<script>
import { reactive, toRefs } from 'vue';
export default {
	name: 'IndexPage',
	components: {},
	setup() {
		const data = reactive({
			w: false,
		});
		const wcss = (e) => {
			data.w = e;
		};
		return {
			...toRefs(data),
			wcss,
		};
	},
};
</script>
<template>
	<div class="index-page">
		<el-container style="height: 100%">
			<el-aside :class="w ? 'menu1' : 'menu'">
				<!-- 左侧菜单 -->
				<LeftMenu @w="wcss"></LeftMenu>
			</el-aside>
			<el-container>
				<el-header class="border-b">
					<!-- 顶部组件 -->
					<nav-tab></nav-tab>
				</el-header>

				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<style lang="less" scoped>
.index-page {
	width: 100%;
	height: 100%;
	.menu {
		width: 200px;
	}

	.menu1 {
		width: auto;
	}
	.border-b {
		border-bottom: 1px solid #eee;
		box-shadow: 0 2px 2px #eee;
	}
}
</style>
